<template>
  <div>
    <h4 class="font-weight-bold">
      <span class="text-muted font-weight-light">API设置 /</span> 返回值字典
    </h4>

    <b-card header="返回数据的结构说明" header-tag="h6" class="mb-4">
      <Row :gutter="32">
        <v-jstree :data='data' :class="{ 'tree-rtl': isRTL }" allow-batch />
      </Row>
    </b-card>
  </div>
</template>

<style src="@/vendor/libs/vue-data-tables/vue-data-tables.scss" lang="scss"></style>
<style src="@/vendor/libs/sweet-modal-vue/sweet-modal-vue.scss" lang="scss"></style>
<style src="@/vendor/libs/vue-jstree/vue-jstree.scss" lang="scss"></style>
<style scoped>
h5 {
    margin-bottom: 0;
    font-weight: bold;
    font-size: 14px;
}
</style>


<script>
import VJstree from "vue-jstree";
import ConsoleResult from "./../origin/childPanel/Result";

export default {
    name: "ui-treeview",
    metaInfo: {
        title: "Treeview - UI elements"
    },
    components: {
        VJstree,
        "console-result": ConsoleResult
    },
    data: () => ({
        data: [
            {
                text: "status（返回状态）",
                icon: "far fa-circle"
            },
            {
                text: "message（返回信息）",
                icon: "far fa-circle"
            },
            {
                text: "result（返回结果）",
                icon: "fas fa-circle",
                opened: true,
                children: [
                    {
                        text: "KeyNo",
                        icon: "far fa-circle"
                    },
                    {
                        text: "Name",
                        icon: "far fa-circle"
                    },
                    {
                        text: "OperName",
                        icon: "far fa-circle"
                    },
                    {
                        text: "StartDate",
                        icon: "far fa-circle"
                    },
                    {
                        text: "Status",
                        icon: "far fa-circle"
                    },
                    {
                        text: "No",
                        icon: "far fa-circle"
                    }
                ]
            }
        ]
    }),
    computed: {
        treeDataJson() {
            return JSON.stringify(this.treeData);
        }
    },
    methods: {
        itemClick(node) {
            console.log(node.model.text + " clicked !");

            // Trigger model update by clonning data
            this.treeData = this.treeData.slice(0);
        }
    }
};
</script>
